<template>
  <el-dialog
    v-model="dialogVisible"
    title="提问"
    width="500px"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
    >
      <el-form-item prop="name" label="名称">
        <el-input
          v-model="form.name"
          placeholder="请输入名称"
        />
      </el-form-item>
      
      <el-form-item prop="summary" label="概述">
        <el-input
          v-model="form.summary"
          type="textarea"
          :rows="4"
          placeholder="请输入概述（选填）"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button 
        type="primary" 
        :loading="loading" 
        @click="handleSubmit"
      >
        提交
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useQuestionStore } from '@/stores/question'
import { ElMessage } from 'element-plus'

const props = defineProps({
  visible: Boolean
})

const emit = defineEmits(['update:visible'])

// 表单数据
const form = reactive({
  name: '',
  summary: ''
})

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ]
}

const formRef = ref(null)
const loading = ref(false)
const questionStore = useQuestionStore()

// 对话框可见性
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => {
    emit('update:visible', value)
    if (!value) {
      form.name = ''
      form.summary = ''
      formRef.value?.resetFields()
    }
  }
})

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    loading.value = true
    
    await questionStore.askQuestion({
      name: form.name,
      summary: form.summary
    })
    
    ElMessage.success('提交成功')
    dialogVisible.value = false
  } catch (error) {
    ElMessage.error('提交失败，请重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 